<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24">
        <el-card class="welcome-card">
          <h3>欢迎使用羽毛球装备智能推荐平台</h3>
          <p>在这里，您可以找到最新、最全的羽毛球装备信息，享受智能推荐服务。</p>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="content-row">
      <el-col :span="12">
        <el-row :gutter="20" class="content-subrow">
          <el-col :span="24">
            <el-card class="grid-item">
              <h4>热门推荐</h4>
              <el-table :data="hotEquipmentList">
                <el-table-column prop="brand" label="品牌"></el-table-column>
                <el-table-column prop="model" label="型号"></el-table-column>
                <el-table-column prop="specifications" label="规格"></el-table-column>
                <el-table-column prop="price" label="价格"></el-table-column>
                <el-table-column prop="stock" label="库存"></el-table-column>
                <el-table-column label="描述">
                  <template slot-scope="scope">
                    <img :src="scope.row.imageurl" alt="装备图片" class="equipment-image" />
                    <p>{{ scope.row.description }}</p>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="content-subrow">
          <el-col :span="24">
            <el-card class="grid-item">
              <h4>最新资讯</h4>
              <el-table :data="newsList">
                <el-table-column prop="title" label="标题"></el-table-column>
                <el-table-column prop="summary" label="摘要"></el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <div class="content-carousel">
          <el-carousel ref="carousel" height="400px" :autoplay="false" arrow="always">
            <el-carousel-item v-for="(item, index) in equipmentList" :key="index">
              <el-card class="carousel-card">
                <h4>{{ item.brand }} - {{ item.model }}</h4>
                <p>规格: {{ item.specifications }}</p>
                <p>价格: ￥{{ item.price }}</p>
                <p>库存: {{ item.stock }}</p>
                <img :src="item.imageurl" alt="装备图片" class="equipment-image" />
                <p>{{ item.description }}</p>
              </el-card>
            </el-carousel-item>
          </el-carousel>
        </div>

      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <div class="chart" ref="chart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      // 假设的涨价数据
      priceData: [
        { date: '2021-01-01', price: 100 },
        { date: '2021-02-01', price: 105 },
        { date: '2021-03-01', price: 108 },
        { date: '2021-04-01', price: 115 },
        { date: '2021-05-01', price: 120 }
      ],
      hotEquipmentList: [
        { brand: 'Yonex', model: 'Astrox 99', specifications: '4U5G', price: 200, stock: 10, imageurl: 'https://example.com/astrox99.jpg', description: '适合高级选手使用的重击型球拍' },
        { brand: 'Li Ning', model: 'Aeronaut 9000', specifications: '3U5G', price: 180, stock: 15, imageurl: 'https://example.com/aeronaut9000.jpg', description: '提供极速反击能力的轻量球拍' }
      ],
      newsList: [
        { title: '羽毛球新赛季开赛', summary: '2021年羽毛球赛季即将开赛，顶级选手将在世界各地竞争。' },
        { title: '新技术在羽毛球装备中的应用', summary: '最新的科技成果被广泛应用于羽毛球装备的设计和制造中。' }
      ],
      equipmentList: [
        { brand: 'Yonex', model: 'Voltric Z-Force', specifications: '5U4G', price: 250, stock: 5, imageurl: 'https://example.com/voltriczforce.jpg', description: '提供爆发力的重头球拍' },
        { brand: 'Li Ning', model: 'Turbo Charging 75', specifications: '4U5G', price: 230, stock: 8, imageurl: 'https://example.com/turbocharging75.jpg', description: '为速度型选手设计的轻快球拍' }
      ],
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      this.chartInstance = echarts.init(chartDom);

      const option = {
        title: {
          text: '羽毛球装备价格趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.priceData.map(item => item.date)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.priceData.map(item => item.price),
          type: 'line'
        }]
      };

      this.chartInstance.setOption(option);
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    }
  }
};
</script>


<style scoped>
.app-container {
  padding: 20px;
}

.welcome-card {
  text-align: center;
  margin-bottom: 20px;
}

.content-row {
  margin-bottom: 20px;
}

.carousel-card {
  text-align: center;
}

.chart-container {
  margin-top: 20px;
}

.chart {
  height: 400px;
}

.content-subrow {
  margin-top: 20px;
}

.grid-item {
  min-height: 200px;
}

.text {
  text-align: center;
  margin-top: 10px;
}

.equipment-image {
  width: 100%;
  max-width: 200px;
  height: auto;
}
</style>
